<template>
    <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="notices"
            :loading="loading"
    >
        <template #bodyCell="{ column, text ,record}">
            <template v-if="column.dataIndex === 'readStatus'">
                {{record.readStatus=='Read'?'已读':'未读'}}
            </template>
            <template v-if="column.dataIndex === 'control'">
              <a-button type="primary" v-if="record.readStatus=='Unread'" @click="changeReadStatus(record.id)">确认收到</a-button>
            </template>

        </template>
    </a-table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from 'axios'
import { useUserStore } from '../../stores/user';

const userStore  = useUserStore()

const columns = [
    {
        title: '通知内容',
        dataIndex: 'content',

    },
    {
        title: '已读状态',
        dataIndex: 'readStatus',
        width: '10%',
    },
    {
        title: '发送时间',
        dataIndex: 'createTime',
        width: '20%',
    },
    {
        title: '操作',
        dataIndex: 'control',
        width: '15%',
    },
];


const notices = ref([])
const noticeQuery = ref({
    userId:0
})

const loadNotices = ()=>{
    noticeQuery.value.userId = userStore.user.id
    axios.get(`/notice/list`,{
        params:{
            ...noticeQuery.value
        }
    }).then(res => {
        notices.value = res.data.data
    })
}

const changeReadStatus = (id)=>{
    axios.put("/notice/update/status",{
        id:id,
        readStatus:'Read'
    }).then(res => {
        loadNotices()
    })
}

onMounted(()=>{
    loadNotices()
})
</script>

<style scoped>

</style>